<template>
  <div class="login-container">
    <video class="login-video" src="@/assets/video.3cf57b17.mp4" autoplay loop muted />
    <!-- 其他登录页面内容，例如表单、按钮等 -->
    <el-card shadow="never" class="login-card">
      <!--登录表单-->
      <!-- el-form > el-form-item > el-input -->
      <el-form ref="form" class="loginForm" :model="loginParams" :rules="rules">
        <el-form-item prop="">
          <img src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png" alt="" class="loginForm-img">
        </el-form-item>
        <el-form-item prop="account">
          <el-input v-model="loginParams.account" placeholder="请输入账号" style="width:300px;" prefix-icon="el-icon-user-solid" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginParams.password" placeholder="请输入密码" type="password" style="width:300px;" prefix-icon="el-icon-unlock" suffix-icon="el-icon-view" />
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginParams.code" placeholder="验证码" style="width:300px;" prefix-icon="el-icon-mobile-phone">
            <template slot="append">
              <img :src="yzmUrl" alt="" class="yzm">
              <!-- <div class="yzm"></div> -->
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button style="width:300px; backgroundColor:#e15536;" type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import { captcha } from '@/api/user'
export default {
  data() {
    return {
      yzmUrl: '',
      loginParams: {
        account: 'shenlingadmin', // 用户名
        password: '123456', // 密码
        code: '', // 验证码
        key: '1334' // 申请验证码key
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const res = await captcha(this.loginParams.key)
    // Blob + URL.createObjectURL 的方式将 png 图片的二进制数据转换为可展示的图片
    this.yzmUrl = URL.createObjectURL(res)
    console.log(this.yzmUrl)
  },
  methods: {
    async login() {
      // await this.$refs.form.validate() // 校验
      await this.$store.dispatch('user/login', this.loginParams)
      this.$message.success('登录成功')
      setTimeout(() => {
        this.$router.push('/')
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;

  display: flex;
  justify-content: center;
  // align-items: center;

}

.login-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

.loginForm{
  margin-top: 40px;
}

.login-card{
  width: 450px;
  height: 500px;

  border-radius:5%;
  margin-top: 150px;
  display: flex;
  justify-content: center
}

.loginForm-img{
  width: 195px;
  height: 54px;

}
</style>>

